<h4>{{ 'AbpAccount::Login' | abpLocalization }}</h4>
@if (isSelfRegistrationEnabled) {
  <strong>
    {{ 'AbpAccount::AreYouANewUser' | abpLocalization }}
    <a class="text-decoration-none" routerLink="/account/register" queryParamsHandling="preserve">{{
      'AbpAccount::Register' | abpLocalization
    }}</a>
  </strong>
}
<form [formGroup]="form" (ngSubmit)="onSubmit()" validateOnSubmit class="mt-4">
  <div class="mb-3 form-group">
    <label for="login-input-user-name-or-email-address" class="form-label">{{
      'AbpAccount::UserNameOrEmailAddress' | abpLocalization
    }}</label>
    <input
      class="form-control"
      type="text"
      id="login-input-user-name-or-email-address"
      formControlName="username"
      autocomplete="username"
      autofocus
    />
  </div>
  <div class="mb-3 form-group">
    <label for="login-input-password" class="form-label">{{
      'AbpAccount::Password' | abpLocalization
    }}</label>
    <input
      class="form-control"
      type="password"
      id="login-input-password"
      formControlName="password"
      autocomplete="current-password"
    />
  </div>

  <div class="row">
    <div class="col">
      <div class="form-check">
        <label class="form-check-label mb-2" for="login-input-remember-me">
          <input
            class="form-check-input"
            type="checkbox"
            id="login-input-remember-me"
            formControlName="rememberMe"
          />
          {{ 'AbpAccount::RememberMe' | abpLocalization }}
        </label>
      </div>
    </div>
    <div class="text-end col">
      <a routerLink="/account/forgot-password">{{
        'AbpAccount::ForgotPassword' | abpLocalization
      }}</a>
    </div>
  </div>

  <abp-button
    [loading]="inProgress"
    buttonType="submit"
    name="Action"
    buttonClass="btn-block btn-lg mt-3 btn btn-primary"
  >
    {{ 'AbpAccount::Login' | abpLocalization }}
  </abp-button>
</form>
